import { getAppTheme, onAppThemeChange } from '@/utils';
import { ref } from 'vue';
export default () => {
  type Theme = 'dark' | 'light';
  const theme = ref<Theme>('light');
  const getTheme = () => {
    theme.value = getAppTheme()?.theme == 'dark' ? 'dark' : 'light';
  };
  const initTheme = () => {
    if (theme.value === 'dark') {
      setTimeout(() => {
        document.documentElement.setAttribute('theme-mode', 'black');
      }, 0);
    }
  };
  const onThemeChange = () => {
    onAppThemeChange((res: { theme: Theme }) => {
      if (res.theme == 'dark') {
        document.documentElement.setAttribute('theme-mode', 'black');
        theme.value = 'dark';
      } else {
        document.documentElement.setAttribute('theme-mode', '');
        theme.value = 'light';
      }
    });
  };
  return {
    theme,
    getTheme,
    initTheme,
    onThemeChange,
  };
};
